<template>
    <div class="Attention">
        <Header></Header>
        <div class="Attention-pc">         
            <div class="content">
                <div class="box">
                    <div class="top">
                        <div class="left">
                            <img src="@/assets/Attention1.jpg" class="img">
                        </div>
                        <div class="middle">
                            <div class="top">
                                <div class="text">
                                昧凉天空少年心°
                                </div>
                            </div>
                            <div class="bottom">
                                <button class="btn">+关注</button>
                            </div>
                        </div>
                        <div class="right">
                            <div class="left">
                                <div class="top">
                                    关注
                                </div>
                                <div class="bottom">
                                    {{message.attention}}
                                </div>
                            </div>
                            <div class="right">
                                <div class="top">
                                    浏览
                                </div>
                                <div class="bottom">
                                    {{message.totalView}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table">
                        <el-tabs>
                            <el-tab-pane label="主题">
                              <Attention_Theme :content="message.works"></Attention_Theme>
                            </el-tab-pane>
                            <el-tab-pane label="策略">
                                抱歉，您还未分享过策略！
                            </el-tab-pane>
                            <el-tab-pane label="回复">
                                <Attention_Reply></Attention_Reply>
                            </el-tab-pane>
                            <el-tab-pane label="关注">
                                抱歉，目前您没有关注！
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>
        <div class="Attention-mobile">
            <div class="content">
                <div class="box">
                    <div class="top">
                        <div class="left">
                            <img src="@/assets/Attention1.jpg" class="img">
                        </div>
                        <div class="middle">
                            <div class="top">
                                <div class="text">
                                研报分享
                                </div>
                            </div>
                            <div class="bottom">
                                <button class="btn">+关注</button>
                            </div>
                        </div>
                    </div>
                    <div class="table">
                        <el-tabs>
                            <el-tab-pane label="主题">
                              <Attention_Theme></Attention_Theme>
                            </el-tab-pane>
                            <el-tab-pane label="策略">
                                抱歉，您还未分享过策略！
                            </el-tab-pane>
                            <el-tab-pane label="回复">
                                <Attention_Reply></Attention_Reply>
                            </el-tab-pane>
                            <el-tab-pane label="关注">
                                抱歉，目前您没有关注！
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Discussion from '@/components/cards/Discussion_Card.vue'
import Attention_Theme from '@/components/cards/Attention_Theme_Card.vue'
import Attention_Reply from '@/components/cards/Attention_Reply_Card.vue'
export default {
    name:'Attention',
    data(){
        return{
            message:{
                id:1,
                author: ' ☺聚宽小秘书',
                attention: 66,
                totalView: 43,
                works: [
                    {
                        id: 1,
                        title : '【API解析】避免未来数据',
                        content: '我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人.',
                        author: ' ☺小秘书',
                        authorId: 1,
                        fuzzyTime: '1个月前',
                        time: new Date(2008,1,4),
                        view: '56',
                        review: '56',
                        like: '56',
                        top: 0,
                        elite: true,
                        category: 1, // 1： 文章；2： 问答；3：公告；4：精华
                        tags: ['研报复现','机器学习']
                    },
                     {
                        id: 2,
                        title : 'Barra模型初探，A股市场风格解析',
                        content: '我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人,我是一个大好人.',
                        author: ' ☺小秘书',
                        authorId: 1,
                        fuzzyTime: '1个月前',
                        time: new Date(2008,1,4),
                        view: '56',
                        review: '56',
                        like: '56',
                        top: 0,
                        elite: true,
                        category: 1, // 1： 文章；2： 问答；3：公告；4：精华
                        tags: ['研报复现','机器学习']
                    },
                ],
                replies:[
                    {
                        target:'@Supercritical-JoinQuant聚宽 几个月了，股息率还没做出来？',
                        reply: '怎么用聚源数据求股息率',
                        time: '2018-09-13'
                    },
                    {
                        target:'@Supercritical-JoinQuant聚宽 几个月了，股息率还没做出来？',
                        reply: '怎么用聚源数据求股息率',
                        time: '2018-09-13'
                    }
                ],
                attentions:[
                    { 
                        id: 1,
                        imgSrc: '',
                        name : '书记打板1',
                        articleNum : 20,
                        attentionNum: 40
                    }
                ]


            }
        }
    },
    components:{
        Header,
        Discussion,
        Attention_Theme,
        Attention_Reply,
    }
}
</script>
<style scoped>
@media screen and (min-width:981px){
.Attention-pc{
    display: block;
    width:100%; 
    height:auto;
    background-color: #ffffff;
    overflow: hidden;
}
.Attention-mobile{
    display: none;
}
.content{
    margin: 90px 200px 33px 200px;
    border: 1px solid #e6e6e6;
}
.content .box{
    width:100%;
    padding: 40px 40px 40px 40px;
}
.content .box .top{
    width:100%;
    height: 85px; 
}
.content .box .top .left{
    float: left;
    width:100px;
    height: 85px;
}
.content .box .top .left .img{
    width:85px;
    height: 85px;
}
.content .box .top .middle{
    float: left;
    width:100px;
    height: 85px;
}
.content .box .top .middle .top{
    height: 55px; 
}
.content .box .top .middle .text{
    font-size: 18px 
}
.content .box .top .middle .bottom{
    height: 30px;
}
.content .box .top .middle .bottom .btn{
    width:100px;
    height: 30px;
    background: rgb(86, 86, 252);
    color: white;
}
.content .box .top .right{
    float: right;
    width:150px;
    height: 85px; 
}
.content .box .top .right .left{
    float: left;
    width:65px;
    height: 85px;
    border-right:1px solid #e6e6e6; 
}
.content .box .top .right .left .top{
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    color: #b9b6b6;
    text-align: center;
}
.content .box .top .right .left .bottom{
    height: 35px;
    font-size: 15px;
    line-height: 30px;
    color: #b9b6b6;
    text-align: center;
}
.content .box .top .right .right{
    float: left;
    width:85px;
    height: 85px;
}
.content .box .top .right .right .top{
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    color: #b9b6b6;
    text-align: center;
}
.content .box .top .right .right .bottom{
    height: 35px;
    font-size: 15px;
    line-height: 30px;
    color: #b9b6b6;
    text-align: center;
}
.table{
    width:100%;
    margin-top:30px; 
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
}
}
@media screen and (max-width:980px){
.Attention-pc{
    display: none;
}
.Attention-mobile{
    display: block;
    width:100%; 
    height:auto;
    background-color: #ffffff;
    overflow: hidden;
    
}
.content{
    margin: 65px 10px 33px 10px;
    border: 1px solid #e6e6e6;
}
.content .box{
    width:100%;
    padding: 20px 0px 40px 0px;
}
.content .box .top{
    width:100%;
    height: 85px; 
}
.content .box .top .left{
    float: left;
    width:100px;
    height: 85px;
}
.content .box .top .left .img{
    width:85px;
    height: 85px;
}
.content .box .top .middle{
    float: left;
    width:100px;
    height: 85px;
}
.content .box .top .middle .top{
    height: 55px; 
}
.content .box .top .middle .text{
    font-size: 18px 
}
.content .box .top .middle .bottom{
    height: 30px;
}
.content .box .top .middle .bottom .btn{
    width:100px;
    height: 30px;
    background: rgb(86, 86, 252);
    color: white;
}
.table{
    width:100%;
    margin-top:30px; 
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
}
}
</style>